<!DOCTYPE html>
<html>
<body>

<style>
body {
    background-color: #E0ECF8;
   
}



</style>

<title>
Feedback Form
</title>

 <h2>Feedback Form:</h2> 

<form>
 <p> Subject: </p> 
  <input  size="48" id="subject" type="text" name="Subject" maxlength="100" placeholder="Subject">       
</form>

<form name="form1" action="#">
  <p> e-mail: </p> 
    <input size="48" id="email"  type="text"name="text1" maxlength="100" placeholder="me@example.com">
</form>


 <p>  </p> 
<form >
<textarea id="text"rows="10" cols="50" placeholder="text input">
</textarea>
</form>
<table >
  <tr> 
    <td>reason for feedback</td>
    <td><select  id="select" >
  <option value="Positive">positive</option>
  <option value="negative">negative</option>
  <option value="angry user">angry user</option>
  <option value="happy user">happy user</option>
  <option value="others">others</option>
     </select></td> 
    <td><button type="submit" onclick="ValidateEmail(document.form1.text1);myFunction();">sent</button></td>

  </tr>

</table>

<script>

var  validationEmail=false;
function myFunction() {
  
var text=document.getElementById("text").value; 
var reason=document.getElementById("select").value; 
var subject=document.getElementById("subject").value; 
var email=document.getElementById("email").value; 
var myArray = new Array();
var myArrayEmail = new Array();
var myArrayText = new Array();
var numberText=0;
var numberSubject=0;
var numberEmail=0;




if (validationEmail) {


for (var i=0; i < subject.length; i++){
     myArray.push(subject[i]);
     numberSubject++;
}


for (var i=0; i < text.length; i++){
     myArrayText.push(text[i]);
     numberText++;
     
}



if (subject== "") {
        document.getElementById("subject").style.backgroundColor = "red";
    }else{
      document.getElementById("subject").style.backgroundColor = "white";
    }
   

if (email == "") {
        document.getElementById("email").style.backgroundColor = "red";
    
    }else{
      document.getElementById("email").style.backgroundColor = "white";
    }
    

if (text == "") {
        document.getElementById("text").style.backgroundColor = "red";

    }else{
      document.getElementById("text").style.backgroundColor = "white";
    }


if (50>=numberSubject&&numberSubject>=5) {

    document.getElementById("subject").style.backgroundColor = "white";
}else{
  alert("The Subject length ot must be between 5 and 50 haracters");
    document.getElementById("subject").style.backgroundColor = "red";
  return;
}

if (1000>=numberText&&numberText>=50) {

    document.getElementById("text").style.backgroundColor = "white";
}else{
  alert("The text length ot must be between 50 and 1000 haracters");
    document.getElementById("text").style.backgroundColor = "red";
  return;
}




if (subject==""|| email ==""||text =="") {
    alert("Please refill the red fields")
        
    }else{

              

    alert("The feedback was successiful sent!!!"+"\nSubject: "+subject+"\nSender e-mail: "+email+"\nReason for sent: "+reason); 



}};}

function ValidateEmail(inputText)  
{  
var mailformat = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/;  
if(inputText.value.match(mailformat))  
{  
document.form1.text1.focus();
document.getElementById("email").style.backgroundColor = "white";  
validationEmail=true;
return true;  
}  
else  
{  
alert("invalid email address!");  
document.form1.text1.focus();  
document.getElementById("email").style.backgroundColor = "red";
validationEmail=false;
return false;  
}  
}  
  
</script> 
</body>
</html>